<template>
  	<div class="app-container">
		<div class="time-list">
			<div :class="timeIndex == index ? 'item on' : 'item'" v-for="(item, index) in timeList" :key="index" @click="changeTime(index)">{{ item.date }} ({{ item.week }})</div>
		</div>
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="92px">
            <el-form-item label="" prop="mccids">
				<el-select v-model="queryParams.mccids" placeholder="请选择管家账户" multiple filterable clearable >
					<el-option v-for="item in manageList" :key="item.userId" :label="item.userName" :value="item.userId" />
				</el-select>
			</el-form-item>
            <el-form-item label="" prop="id_name">
                <el-input v-model="queryParams.id_name" placeholder="请输入账户名称/ID" clearable style="width: 160px" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row type="flex" class="row-bg mb8" justify="space-between" :gutter="10">
            <el-col :span="1.5"></el-col>
            <el-col :span="1.5">
                <el-button type="primary"  icon="el-icon-download" size="mini" @click="openDialog">添加账户</el-button>
                <el-button type="primary"  icon="el-icon-download" size="mini" @click="batchDelete">批量删除</el-button>
            </el-col>
        </el-row>

		<el-table v-loading="loading" :data="tableList" @selection-change="selectionChange">
			<el-table-column type="selection" width="45" align="center" />
			<el-table-column label="所属渠道" align="center" prop="level3_channel_name" :show-overflow-tooltip="true" />
            <el-table-column label="管家名称" align="center" prop="fatname" :show-overflow-tooltip="true" />
            <el-table-column label="账户ID" align="center" prop="userid" />
            <el-table-column label="账户名称" align="center" prop="username" :show-overflow-tooltip="true" />
			<el-table-column label="投放人" align="center" prop="allocate_user_name" :show-overflow-tooltip="true" />
            <el-table-column label="计划创建时间" align="center" prop="create_time" :show-overflow-tooltip="true" />
            <el-table-column label="最近更新时间" align="center" prop="account_update_time" :show-overflow-tooltip="true" />
			<el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="deletePlan(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
		</el-table>

		<pagination
			:total="total"
			:page.sync="queryParams.page"
			:limit.sync="queryParams.pageSize"
			@pagination="getList"
		/>

		<el-dialog title="添加账号" :visible.sync="dialogVisible" width="60%" :close-on-click-modal="false">
			<div class="curtime">{{ timeCheck.date }} ( {{ timeCheck.week }} )</div>
			<el-form :model="diaParams" ref="diaParams" size="small" :inline="true" label-width="92px">
				<el-form-item label="" prop="mccids">
					<el-select v-model="diaParams.mccids" placeholder="请选择管家账户" multiple filterable clearable >
						<el-option v-for="item in manageList" :key="item.userId" :label="item.userName" :value="item.userId" />
					</el-select>
				</el-form-item>
				<el-form-item label="" prop="id_name">
					<el-input v-model="diaParams.id_name" placeholder="请输入账户名称/ID" clearable style="width: 160px" @keyup.enter.native="handleQuery" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" size="mini" @click="diaSearch">搜索</el-button>
					<el-button icon="el-icon-refresh" size="mini" @click="resetDia">重置</el-button>
				</el-form-item>
			</el-form>
			<el-table v-loading="loading" :data="accountList" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="45" align="center" />
				<el-table-column label="所属渠道" align="center" prop="level3_channel_name" :show-overflow-tooltip="true" />
				<el-table-column label="管家名称" align="center" prop="fatname" :show-overflow-tooltip="true" />
				<el-table-column label="账户ID" align="center" prop="userid" />
				<el-table-column label="账户名称" align="center" prop="username" :show-overflow-tooltip="true" />
				<el-table-column label="投放人" align="center" prop="allocate_user_name" :show-overflow-tooltip="true" />
				<el-table-column label="最近更新时间" align="center" prop="update_time" :show-overflow-tooltip="true" />
			</el-table>
			<pagination
				:total="accounTotal"
				:page.sync="diaParams.page"
				:limit.sync="diaParams.pageSize"
				@pagination="getDiaList"
			/>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submit">保 存</el-button>
			</span>
		</el-dialog>
  </div>
</template>

<script>
import { getTimeList, getManageList, getPlanList, getAccountList, planSave, planDelete } from "@/api/placement";

export default {
	data() {
		return {
			loading: true,
			timeIndex:0,
			timeList:[],
			timeCheck: {data:'',week:''},
			total:0,
			manageList:[],
			queryParams: { page: 1, pageSize: 15},
			tableList:[],
			delIds:[],//批量删除
			accountList:[],
			accounTotal: 0,
			accounIds:[],
			dialogVisible:false,
			diaParams: { page: 1, pageSize: 10},
		};
	},
	created() {
		this.getTimeList()
		this.getManage()
	},
 	methods: {
		getTimeList(){
			getTimeList().then(res => {
				this.timeList = res.data
				this.timeCheck = this.timeList[0]
				this.queryParams.allocate_time = this.timeCheck.date
				this.getList()
			});
		},
		changeTime(index){
			this.timeIndex = index
			this.timeCheck = this.timeList[this.timeIndex]
			this.queryParams.allocate_time = this.timeCheck.date
			this.resetForm("diaParams");
			this.resetQuery()
		},
		 /** 下拉管家 */
		getManage(){
            getManageList().then(res => {
                this.manageList = res.data
            })
        },
		getList() {
			this.loading = true
			getPlanList(this.queryParams).then(res => {
                this.tableList = res.data.data
				this.total = res.data.total;
				this.loading = false;
            })
		},
		/** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.page = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
		selectionChange(rows){
			this.delIds = rows.map(e => e.id)
		},
		deletePlan(id){
			this.$modal.confirm('是否确认删除？').then(function() {
                return  planDelete({'allocate_ids': [id]})
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => {});
		},
		batchDelete(){
			if(!this.delIds.length){
				this.$modal.msgError("请选择一条数据");
                return false
			}
			const that = this
			this.$modal.confirm('是否确认删除？').then(function() {
                return  planDelete({'allocate_ids': that.delIds})
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => {});
		},
		openDialog(){
			this.dialogVisible =  true
			this.getDiaList();
		},
		/** 重置弹窗按钮操作 */
		resetDia() {
            this.resetForm("diaParams");
            this.diaSearch();
        },
		diaSearch() {
            this.diaParams.page = 1;
            this.getDiaList();
        },
		getDiaList(){
            this.loading = true
			this.diaParams.allocateTime = this.timeCheck.date
			this.diaParams.isFilterAllocated = 1
            getAccountList(this.diaParams).then(res => {
				this.accountList = res.data.data
				this.accounTotal = res.data.total;
				this.loading = false;
			});
		},
		handleSelectionChange(rows){
			let newArr=[]
			rows.forEach(e => {
				newArr.push(e.id)
			});
			this.accounIds = newArr
		},
		submit(){
			const params = {
				aifanfan_account_ids: this.accounIds,
				allocate_time: this.timeCheck.date,
				type:'time'
			}
			planSave(params).then(res => {
				this.$message.success('添加成功');
				this.getList()
				this.dialogVisible = false
			});
		}
	}
};
</script>

<style scoped>
	.time-list{display: flex;margin-bottom: 20px;}
	.time-list .item{border: 1px solid #1890ff;padding: 10px;font-size: 12px;margin-left: -1px;color: #1890ff;cursor: pointer;width: 150px;text-align: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
	.time-list .item.on{background: #1890ff;color: #fff;}
	.curtime{margin-top: -20px;margin-bottom: 20px;font-weight: bold;}
</style>